<template>
  <div class="videoPlayer">
    <div id="wrapper" style="width: 500px;"></div>
    <el-input v-model="url"></el-input>
    <el-button @click="play()">播放</el-button>
  </div>
</template>
<script setup lang="ts">
import { ref, inject, reactive, nextTick, onMounted } from "vue";


let url = ref('')

let chimee: any = null
 //视频总时长

import ChimeePlayer from 'chimee-player';
import 'chimee-player/lib/chimee-player.browser.css'

function play(){
  window.chimee?.load(url.value)
                window.chimee?.play();
}
//这里自动播放
nextTick(() => {

  Player()
})
const Player = () => {
  nextTick(() => {
    window.chimee = new ChimeePlayer({
      wrapper: document.getElementById("wrapper"),  // video dom容器
      language:'zh-CN',
      box:'hls',
      src:'http://[2409:8087:1a01:df::4077]:80/ottrrs.hl.chinamobile.com/PLTV/88888888/224/3221225734/index.m3u8',
      textTrackDisplay: true,
      errorDisplay: true,
      controlBar: false,  //自带操作按钮
      controls: true, //是否展示控制条
      autoplay: true, //自动播放，但是使用无效
      // muted: true, //是否静音
      isLive: true,  //true 直播流
      plugins: [
      {
        name: 'chimeeContextmenu',
        baseMenus: [],
      },
      {
        name: 'chimeeControl',
        majorColor: '',
        hoverColor: '',
        children: {
          play: {},

          chimeeAsd: {
            tag: 'chimee-asd',
            html: `<el-button title="取消">取消</el-button>`,
            // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom
            event: {
              click() {
                
                window.chimee?.pause();
                window.chimee?.load('')
                console.log('');
              }
            }
          },
          chimeeAsd2: {
            tag: 'chimee-asd2',
            html: `<el-button title="取消">取消</el-button>`,
            // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom
            event: {
              click() {
                window.chimee.load('http://ali-m-l.cztv.com/channels/lantian/channel001/1080p.m3u8')
                window.chimee?.play();
                console.log('');
              }
            }
          },
          // progressTime: {}, 
          progressBar: {}, 
          volume: {}, screen: {},
          playbackrate: {
            // default 通过设置 default 来标明当前播放速率
            list: [
              // { name: '0.25倍速', value: 0.25 },
              { name: '0.5倍速', value: 0.5 },
              { name: '0.75倍速', value: 0.75 },
              { name: '正常', value: 1, default: true },
              // { name: '1.25倍速', value: 1.25 },
              { name: '1.5倍速', value: 1.5 },
              // { name: '1.75倍速', value: 1.75 },
              { name: '2倍速', value: 2 },
              // { name: '2.5倍速', value: 2.5 },
              { name: '3倍速', value: 3 }
            ],
            // 可以指定 event 来绑定一些事件，默认 this 是该插件，而不是 dom
            event: {
              click(e: MouseEvent) {
                
                console.log(e, '1111');
              }
            }
          },
          // volume: {
          //   icon: {
          //     low: '',
          //     high: ''
          //   },
          //   layout: 'vertical'
          // },
        },

      },
      // { name: 'my_popup' },
      // { name: 'chimeeContextmenu'},
      // { name: 'chimeeCenterState'},
    ]
    });
    // chimee?.load('http://39.134.66.66/PLTV/88888888/224/3221225816/index.m3u8');
    //测试地址，网上拷贝的
    // chimee?.load('https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4');
    const audioDom = document.getElementById("wrapper")
    audioDom && audioDom.click() // 【主要代码 - 解决报错】先模拟与页面进行交互，防止报错
    // window.chimee && window.chimee.play() // 播放音频

    // window.chimee?.play();
    
    // if (playPromise) {
    //   playPromise.then(() => {
    //     // console.log("done.", props.url);
    //   }).catch((e) => {})
    // }
    //播放
    // chimee?.on('play', async () => {
    //   console.log('play', chimee.currentTime >= sliderMax.value)
    //   //播放时间大于等于视频总时间停止计时器
    //   if (chimee.currentTime >= sliderMax.value) {
    //     clearInterval(timer.value);
    //     timer.value = null;
    //     return
    //   }
    //   timer.value = setInterval(initTime, 60);
    // })
    // //暂停
    // chimee?.on('pause', async () => {
    //   clearInterval(timer.value);
    //   timer.value = null;
    // })
  }).then(()=>{
    
  })
}


</script>
